<!--
*- coding = utf-8 -*-
#@Time : 2022/9/7 9:53
#@Author : 沉默小管
#@File : useClass.ts
#@web  : golangblog.blog.csdn.net
#@Software: WebStorm
-->
<template>

    <div class="login" :style="`background: url(${loginBgm});background-size:cover;`">
        <section class="login-box animate__animated animate__slideInDown">
            <!-- 左侧 -->
            <div class="login-left">
                <img class="login-img" src="@/assets/icons/svg/login-img1.svg" />
            </div>
            <!-- 右侧 -->
            <div class="login-right u-f u-f-ac u-f-ajc">
                <el-form
                        ref="queryFormDom"
                        v-show="isShowLogin === true"
                        :model="queryForm"
                        :rules="formRules"
                        class="login-form"
                        status-icon
                >
                    <h3 className="login-form-title u-f u-f-ac u-f-ajc">
                        VueCms
                    </h3>
                    <el-form-item prop="username">
                        <el-input
                                v-model="queryForm.username"
                                type="text"
                                auto-complete="off"
                                placeholder="账号"
                                @input="handleInputUpdate"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                                v-model="queryForm.password"
                                type="password"
                                auto-complete="off"
                                placeholder="密码"
                                @keyup.enter.native="handleSubmitLoginForm(queryFormDom)"
                                @input="queryForm.password = $event"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code" v-if="captchaOnOff">
                        <el-input
                                v-model="queryForm.code"
                                auto-complete="off"
                                placeholder="验证码"
                                style="width: 63%"
                                @keyup.enter.native="handleSubmitLoginForm(queryFormDom)"
                        >
                        </el-input>
                        <div class="login-code">
                            <img :src="codeUrl" @click="handleGetCode" class="login-code-img" />
                        </div>
                    </el-form-item>
                    <div class="u-f u-f-ajs u-f-ac margin-bottom-15">
                        <el-checkbox :checked="queryForm.rememberMe" v-model="queryForm.rememberMe" >记住密码</el-checkbox>
<!--                        <el-link-->
<!--                                @click="isShowLogin = false"-->
<!--                                type="primary"-->
<!--                        >没有账号,前往注册</el-link>-->
                    </div>

                    <el-form-item style="width: 100%">
                        <el-button
                                class="margin-bottom-10"
                                :loading="globalLoading"
                                type="primary"
                                style="width: 100%"
                                @click.native.prevent="handleSubmitLoginForm(queryFormDom)"
                        >
                            <span v-if="!globalLoading">登 录</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                        <el-button
                                type="primary"
                                style="width: 100%;margin-left:0px;"
                                @click.native.prevent="resetForm(queryFormDom)"
                        >
                            重 置
                        </el-button>
                    </el-form-item>
                </el-form>

                <el-form
                        v-show="isShowLogin === false"
                        :model="registryForm"
                        :rules="registryRules"
                        class="login-form"
                        ref="formRegisterRef"
                        status-icon
                >
                    <h3 class="title">vueCms管理系统</h3>
                    <el-form-item>
                        <el-input
                                v-model="registryForm.userName"
                                type="text"
                                auto-complete="off"
                                placeholder="请输入账号注册">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                                v-model="registryForm.password"
                                type="password"
                                auto-complete="off"
                                placeholder="请输入密码注册"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="10">
                            <el-input
                                    :size="settingStore.sysSize"
                                    v-if="isShowSendSms === true"
                                    v-model="registryForm.phoneNumber"
                                    placeholder="请输入手机号"
                            >
                            </el-input>
                            <el-input
                                    v-else
                                    v-model="handleSendSms"
                                    placeholder="请输入短信验证码"
                                    style="width: 50px"
                            >
                            </el-input>
                        </el-col>
                        <el-col :span="12">
                            <el-button
                                    v-if="isShowSendSms === true"
                                    @click="handleSendSms"
                                    style="margin-left: 5px"
                                    effect="dark">获取手机验证码</el-button>
                            <el-button
                                    v-if="isShowPutSms === true"
                                    style="margin-left: 5px"
                                    effect="dark">请 {{ countNum }} 秒后再获取</el-button>
                            <el-button
                                    v-if="isShowReSend"
                                    @click="handleSendSms"
                                    style="margin-left: 5px"
                                    effect="dark"
                            >重新获取验证码</el-button>
                        </el-col>
                    </el-form-item>
                    <div class="u-f u-f-ajs u-f-ac margin-bottom-15">
                        <el-checkbox v-model="registryForm.rememberMe" >记住密码</el-checkbox>
                        <el-link @click="isShowLogin = true" type="primary">已有账号,前往登录</el-link>
                    </div>

                    <el-form-item style="width: 100%">
                        <el-button
                                :loading="globalLoading"
                                type="success"
                                style="width: 100%"
                                @click.native.prevent="handleSubmitRegisterForm"
                        >
                            <span v-if="!globalLoading">注册</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </section>
    </div>
</template>

<script setup lang="ts">
    import loginBgm from "@/assets/img/loginBgm.png"
    import { getRememberUsername, getRememberPwd, getRemember } from "@/utils/storage";
    import {resInterface} from "@/commonNetwork/index";
    import {ElForm, FormRules} from "element-plus";
    import {handleGetCurInstance} from "@/utils/utils";
    import FormList from "@/components/formList";
    import {useBgmMeteor} from "@/views/login/hooks/useBgmMeteor";
    import {useStore} from "@/store/piniaAutoImport";
    import {reactive, ref, watch} from "vue";
    import $ from "jquery";
    import {storeToRefs} from "pinia";
    import {useRouter} from "vue-router";

    let userStore = useStore("useUser")
    let appStore = useStore("useApp")
    let {globalLoading} = storeToRefs(appStore)

    interface queryFormInterface{
        username:string,
        password: string,
        rememberMe: boolean,
        code: string,
        uuid: string,
    }
    interface registerFormInterface{
        userName:string,
        password: string,
        phoneNumber: string,
        rememberMe: boolean,
    }
    const router = useRouter()
    let {model,i18n,globalProperties} = handleGetCurInstance()
    let settingStore = useStore("useSetting")
    let redirect = ref<string|null>("")
    let queryFormDom = ref<InstanceType<typeof FormList>>()
    let formRegisterRef = ref<InstanceType<typeof ElForm>>()
    let countNum = ref<number>(20)
    let isShowLogin = ref<boolean>(true)
    let isShowSendSms = ref<boolean>(true)
    let isShowReSend = ref<boolean>(false)
    let captchaOnOff = ref<boolean>(false)
    let isShowPutSms = ref<boolean>(false)
    let loading = ref<boolean>(false)
    let codeUrl = ref<string>("")
    let queryForm = ref<any>({
        username: getRememberUsername(),
        password: getRememberPwd(),
        rememberMe: getRemember(),
        code: "",
        uuid: "",
    })
    const formRules = reactive<FormRules>({
        username: [{
            required: true,
            trigger: 'blur' ,
            message: '请输入账号'
        }],
        password: [{
            required: true,
            trigger: 'blur' ,
            message: '请输入密码'
        }],
    })
    let registryForm = reactive<registerFormInterface>({
        userName: "",
        password: "",
        phoneNumber: "",
        rememberMe: false,
    })
    const registryRules = reactive<FormRules>({
        userName: [{
            required: true,
            trigger: 'blur' ,
            message: '用户名不能为空'
        }],
        password: [{
            required: true,
            trigger: 'blur' ,
            message: '密码不能为空'
        }],
        phoneNumber: [{
            required: true,
            trigger: 'blur' ,
            message: '短信验证码不能为空'
        }],
    })

    const handleInputUpdate = () =>{
      globalProperties
    }

    //获取验证码
    const handleGetCode=()=>{
        model.handleMsg(`开发中`, "warning")
        // requestGetCodeImg().then((res) => {
        //   captchaOnOff = res.data.captchaOnOff === undefined ? true : res.data.captchaOnOff;
        // if (captchaOnOff) {
        //   codeUrl = "data:commonImage/gif;base64," + res.data.img;
        //   queryForm.uuid = res.data.uuid;
        // }
        // });
    }
    const handleSubmitLoginForm = async (queryFormDom): Promise<void> => {
        await queryFormDom.validate(async (valid: any, fields: any) => {
            if (valid) {
                appStore.handleSwitchGlobalLoading(true)
                let {username,password,rememberMe} = queryForm.value;
                userStore.LoginNoCode({username,password,rememberMe}).then((res:resInterface)=>{
                    let {data,code,message} = res;
                  if(code!=200){
                        model.handleMsg(`${message}`,"warning")
                        appStore.handleSwitchGlobalLoading(false)
                        return false;
                    }else{
                      model.handleNotificationClose()
                        router.push({path:redirect || "/"})
                    }
                }).catch((err: any)=>{
                  appStore.handleSwitchGlobalLoading(false)
                })
            } else {
                console.log('error submit!')
                return false
            }
        })
    }

    const resetForm = (queryFormDom: any) => {
        queryFormDom.resetFields()
    }

    //发送短信
    const handleSendSms = ()=>{
        model.handleMsg(`开发中`, "warning")
        // this.isShowReSend = false;
        // if (!this.registryForm.phoneNumber) {
        //   this.msgInfo("请输入手机号码!");
        // } else {
        //   this.isShowSendSms = false;
        //   this.isShowPutSms = true;
        //   // 发送注册码
        //   toSendRegistrySms({ phone: this.registryForm.phoneNumber }).then(
        //       (res) => {
        //         this.msgSuccess("验证码已发送，请注意查收!");
        //         this.sms = res.sms;
        //         console.log(res);
        //       }
        //   );
        //
        //   // 倒计时
        //   let timer = setInterval(() => {
        //     if (this.countNum > 0) {
        //       this.countNum--;
        //     } else if (this.countNum === 0) {
        //       this.isShowPutSms = false;
        //       this.countNum = 20;
        //       this.isShowReSend = true;
        //     }
        //   }, 1000);
        // }
    }

    const handleSubmitRegisterForm = ()=>{
        // if (this.smsCode === this.sms) {
        //   console.log(this.registryForm);
        //   if (!this.registryForm.userName) {
        //     this.msgInfo("请输入账号注册!");
        //   } else if (!this.registryForm.password) {
        //     this.msgInfo("请输入密码注册!");
        //   } else if (!this.smsCode) {
        //     this.msgInfo("请输入短信验证码!");
        //   } else if (
        //       this.registryForm.userName &&
        //       this.registryForm.password &&
        //       this.smsCode
        //   ) {
        //     registry(this.registryForm).then((res) => {
        //       if (res) {
        //         this.msgSuccess("新用户注册成功!");
        //         this.isShowLogin = true;
        //       }
        //     });
        //   }
        // } else {
        //   this.msgInfo("请输入正确的手机注册码");
        // }
    }
    watch(()=>router.currentRoute.value.path,()=>{
        redirect = router.currentRoute.value.query && router.currentRoute.value.query.redirect
    },{immediate:true,deep:true})
    const handleNotice = ()=>{
      let msg = '<div class="login-notify-content">\n' +
          '因token设置有效时间，所以会遇到token失效、退出登录的情况\n'+
          '          <div class="margin-top-10">\n' +
          '            <p>后台帐号：<b>vueCms</b></p>\n' +
          '          </div>\n' +
          '          <p>后台密码：<b>vueCms_xg</b></p>\n' +
          '        </div>'
      let otherOptions = {
        dangerouslyUseHTMLString: true,
        position: 'bottom-right',
        duration:0
      }
      model.handleNotification(msg,"warning",'提示',otherOptions)
    }
    handleNotice()
    let {handleInitMeteor} = useBgmMeteor()

    $(document).ready(function(){
      handleInitMeteor()
    });

</script>

<style scoped lang="less">
    .login-form-title {
        font-weight: 700;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow:ellipsis;
        position:relative;
    }
    .login-form-title:before{
        content: "";
        position: absolute;
        left: -665px;
        top: -460px;
        width: 200px;
        height: 15px;
        background-color: rgba(255,255,255,.5);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: searchLights 4s ease-in 0s infinite;
        -o-animation: searchLights 4s ease-in 0s infinite;
        animation: searchLights 4s ease-in 0s infinite;
    }
    @-webkit-keyframes searchLights {
        0% { left: -90px; top: 0; }
        to { left: 90px; top: 0; }
    }
    .login {
        position:relative;
        overflow:hidden;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      background: linear-gradient(180deg, #2e3d4e, #001528);
        &-box {
            width: 720px;
            height: 380px;
            display: flex;
            z-index: 999;
            box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
        }
    }

    .login-left {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background: linear-gradient(60deg,rgb(39, 91, 214),rgb(16, 54, 171));
        .login-img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            transition: all 0.3s;
            object-fit: cover;
        }
    }

    .login-right {
        width: 270px;
        height: 100%;
        box-sizing: border-box;
        background:white;
    }


    .login {
        height: 100vh;
        background-size: cover;
    }
    .login-form {
        width:84%;
        border-radius: 10px;
        .el-input {
            height: 38px;
            input {
                height: 38px;
            }
        }
        .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
        }
    }
    .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
    }
    .login-code {
        width: 33%;
        height: 38px;
        float: right;
        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }
    .el-login-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
    .login-code-img {
        height: 38px;
    }
</style>
